<template>
  <div>
    <div class="dataimg-shows" v-for="(item,index) in dateShowList" :data-date="item.time" :key="index">
      <el-checkbox v-model="item.checkAll" :indeterminate="item.isIndeterminate" @change="handleCheckAllChange($event,item)">{{item.time}}</el-checkbox>
      <el-row :gutter="9">
        <el-col :span="3">
          <el-checkbox-group v-model="checkedimgs" @change="handlecheckedimgsChange($event,item)">
            <div v-for="(colItem,subIndex) in item.imgList" :key="subIndex">
              <el-checkbox :label="colItem.sortKey"></el-checkbox>
              <img :src="colItem.url" alt="" />
            </div>
          </el-checkbox-group>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'checkBox',
  props: {

  },
  data() {
    return {
      checkedimgs: [],
      dateShowList: [{
        time: '2019-4-23',
        checkAll: false,
        imgList: [{
          sortKey: 'a',
          id: 1,
          url: 'https://admin.doooly.com/image/201904/abe64e5c-b913-42a4-806b-feccc17d960b.png'
        },
        {
          sortKey: 'c',
          id: 2,
          url: 'https://admin.doooly.com/image/201904/abe64e5c-b913-42a4-806b-feccc17d960b.png'
        }
        ]
      }, {
        time: '2019-4-24',
        checkAll: false,
        imgList: [{
          sortKey: 'b',
          id: 1,
          url: 'https://admin.doooly.com/image/201904/abe64e5c-b913-42a4-806b-feccc17d960b.png'
        }
        ]
      }]
    }
  },
  computed: {

  },
  created() {
  },
  mounted() {

  },
  methods: {
    handleCheckAllChange(value, item) {
      let labels = []
      item.imgList.map(x => {
        labels.push(x.sortKey)
      })
      this.checkedimgs = value ? labels : [];
      item.isIndeterminate = false;
    },
    handlecheckedimgsChange(value, item) {
      let checkedCount = value.length;
      item.checkAll = checkedCount === item.imgList.length;
      item.isIndeterminate = checkedCount > 0 && checkedCount < item.imgList.length;
    }
  },
  watch: {

  },
  components: {}
};
</script>